<template>
    <div>

        <MyTable :arr="list">

            <template v-slot:header>
                <th>#</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>标签</th>
                <th>操作</th>
            </template>

            <template #body="scope">
                <td>{{ scope.row.id }}</td>
                <td>{{ scope.row.name }}</td>
                <td>{{ scope.row.price }}</td>
                <td>{{ scope.row.tags }}</td>
                <td>
                    <button class="btn btn-danger btn-sm" @click="removeItem(scope.row.id)">删除</button>
                </td>
            </template>

        </MyTable>

    </div>
</template>

<script>

import MyTable from '../MyTable.vue';

export default {
    components: {
        MyTable
    },
    data() {

        return {
            list: [
                {
                    id: 1,
                    name: "小米手机1",
                    price: 1000,
                    tags: "手机",
                },
                {
                    id: 2,
                    name: "小米手机2",
                    price: 1000,
                    tags: "手机",
                },
                {
                    id: 3,
                    name: "小米手机3",
                    price: 1000,
                    tags: "手机",
                }
            ]
        }
    },
    methods: {
        removeItem(id) {
            let index = this.list.findIndex(item => item.id === id);
            this.list.splice(index, 1);
        }
    }
}

</script>

<style scoped>

</style>
